<script setup lang="ts">
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { onBeforeUnmount, ref, shallowRef, onMounted } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'

 // 编辑器实例，必须用 shallowRef
 const editorRef = shallowRef()

// 内容 HTML
const valueHtml = ref('<p>hello</p>')

// 模拟 ajax 异步获取内容
onMounted(() => {
    setTimeout(() => {
        valueHtml.value = '<p>模拟 Ajax 异步设置内容</p>'
    }, 1500)
})

const toolbarConfig = {}
const editorConfig = { placeholder: '请输入内容...' }

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
    const editor = editorRef.value
    if (editor == null) return
    editor.destroy()
})

const handleCreated = (editor:any) => {
  editorRef.value = editor // 记录 editor 实例，重要！
}


/*
官方文档： https://www.wangeditor.com/v5/menu-config.html#%E4%B8%8A%E4%BC%A0%E5%9B%BE%E7%89%87

可通过 toolbarConfig 和 editorConfig 来修改菜单栏和编辑器的配置，详细文档参考

    工具栏配置 - 插入新菜单，屏蔽某个菜单等 https://www.wangeditor.com/v5/toolbar-config.html
    编辑器配置 - 兼听各个生命周期，自定义粘贴 https://www.wangeditor.com/v5/editor-config.html
    菜单配置 - 配置颜色、字体、字号、链接校验、上传图片、视频等 https://www.wangeditor.com/v5/menu-config.html

    mode: 'default'
默认模式 - 集成了 wangEditor 所有功能
mode: 'simple'
简洁模式 - 仅有部分常见功能，但更加简洁易用
*/
</script>    

<template>
  <div style="border: 1px solid #ccc">
    <Toolbar
      style="border-bottom: 1px solid #ccc"
      :editor="editorRef"
      :defaultConfig="toolbarConfig"
       mode="default"
    />
    <Editor
      style="height: 500px; overflow-y: hidden;"
      v-model="valueHtml"
      :editorConfig="editorConfig"
      mode="default"
      @onCreated="handleCreated"
    />
  </div>
</template>


<style scoped>

</style>